<template>
  <div class="box">
    <div class="PersonTop">
      <div class="PersonTop_img">
        <img :src="member.avatar" />
      </div>
      <div class="PersonTop_text">
        <div class="user_text">
          <div class="user_name">
            <span v-text="member.nickname"/>
          </div>
          <div class="user-v"><!--  v-if="v === 3" -->
            <!-- <img src="/assets/img/V.png" class="user-v-img" /> -->
            <!-- <span class="user-v-font">优质媒体作者</span> -->
          </div>
          <div class="user_qianming">
            <span v-if="member.sign === ''||member.sign==null" v-text="'这个人很神秘，还没有什么签名....'" style="color: rgb(203,208,216)"/>
            <span v-else v-text="member.sign"/>
            <!-- <span> {{ design }}</span> -->
            <!-- <span>dfsdfsdfsdfsdfsdfewfefrdfsdgfseeresdewgerhrhrwgry</span> -->
          </div>
          <div class="user_anniu">
          </div>
        </div>
        <!-- <div class="user_num">
          <div style="cursor: pointer" @click="myfan">
            <div class="num_number">{{ fanCounts }}</div>
            <span class="num_text">粉丝</span>
          </div>
          <div style="cursor: pointer" @click="myfollow">
            <div class="num_number">{{ followCounts }}</div>
            <span class="num_text">关注</span>
          </div>
          <div>
            <div class="num_number">{{ goodCounts }}</div>
            <span class="num_text">获赞</span>
          </div>
        </div> -->
      </div>
    </div>
    <div class="person_body">
      <div class="person_body_left">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span class="person_body_list" style="border-bottom: none"
              >个人中心</span
            >
          </div>
          <!-- <div
            class="person_body_list"
            v-for="(item, index) in person_body_list"
            :key="index"
          >
            <router-link :to="{ name: item.name, params: item.params }">{{
              item.label
            }}</router-link>
          </div> -->
          <el-menu
            router
            active-text-color="#00c3ff"
            class="el-menu-vertical-demo"
          >
            <el-menu-item
              index="info"
              :route="{ name: 'me-personinfo', params: { id: member.id } }"
            >
              <i class="el-icon-user"></i>
              <span slot="title">个人简介</span>
            </el-menu-item>
            <el-menu-item
              index="course"
              :route="{ name: 'me-mycourse', params: { id: member.id } }"
            >
              <i class="el-icon-edit-outline"></i>
              <span slot="title">我的课程</span>
            </el-menu-item>
            <el-menu-item
              index="order"
              :route="{ name: 'me-myorder', params: { id: member.id } }"
            >
              <i class="el-icon-document"></i>
              <span slot="title">我的订单</span>
            </el-menu-item>
            <!-- <el-menu-item
              index="myfan"
              :route="{ name: 'myfan', params: $route.params.id }"
            >
              <i class="el-icon-tableware"></i>
              <span slot="title">粉丝</span>
            </el-menu-item>
            <el-menu-item
              index="myfollow"
              :route="{ name: 'myfollow', params: $route.params.id }"
            >
              <i class="el-icon-circle-plus-outline"></i>
              <span slot="title">关注</span>
            </el-menu-item> -->
          </el-menu>
        </el-card>
      </div>
      <div class="person_body_right">
        <NuxtChild/>
      </div>
    </div>
    <!-- <personal-dia ref="dia" @flesh="reload" /> -->
  </div>
</template>

<script>
// import { userInfo } from "@/api/user";
// import {
//   myFollow,
//   addFollow,
//   deleteFollow,
//   followAndFanCount,
// } from "@/api/follow.js";
// import { mygoodCount } from "@/api/good";
// import PersonalDia from "./PersonalDia.vue";
import member from '@/api/member'
import cookie from "js-cookie"

export default {
  // components: { PersonalDia },
  // name: "Personal",
  // inject: ["reload"],
  data() {
    return {
      memberId: '',
      member: {
        id: '',
        mobile: '',
        password: '',
        nickname: '',
        sex: null,
        age: null,
        avatar: '',
        sign: null
      }
    };
  },
  created() {
    this.token = cookie.get("user_token");
    const jsonStr = cookie.get("user_ucenter");
    if (this.$route.params.id !== undefined) {
      this.memberId = this.$route.params.id;
      this.load();
    } else if (jsonStr) {
      this.member = JSON.parse(jsonStr);
      this.memberId = this.member.id;
      this.load();
    }
    this.memberInfo = this.member
  },
  mounted() {
    // this.load();
  },
  watch: {
    // $route(to, from) {
    //   if (to.path == `/newsuser/personal/${this.$store.state.id}`) {
    //     this.reload();
    //   } else if (to.path == `/newsuser/personal/${this.$route.params.id}`) {
    //     this.reload();
    //   }
    // },
  },
  methods: {
    load() {
      member
        .getMemberInfoById(this.memberId)
        .then((res) => {
          this.member = res.data.data.member;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 860px;
  background: url(https://eduservice-9528.oss-cn-beijing.aliyuncs.com/background/2022/07/01/background.jpg) no-repeat ;
  background-size: 100% 100%;
}
.me-video-player {
  background-color: transparent;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  position: fixed;
  left: 0;
  z-index: 0;
  top: 0;
}
.PersonTop {
  width: 1000px;
  height: 140px;
  padding-top: 20px;
  background-color: white;
  margin-top: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  border-radius: 5px;
}

.PersonTop_img {
  width: 120px;
  height: 120px;
  background-color: #8c939d;
  margin-right: 24px;
  margin-left: 20px;
  overflow: hidden;
  border-radius: 20px;
}

.PersonTop_img img {
  height: 100%;
  border-radius: 20px;
}

.PersonTop_text {
  height: 120px;
  width: 880px;
  display: flex;
  position: relative;
}

.user_text {
  width: 60%;
  height: 100%;
  line-height: 30px;
}

.user_name {
  padding-left: 10px;
  font-size: 24px;
  font-weight: bold;
}
.user-v {
  margin-bottom: -5px;
}
.user-v-img {
  width: 15px;
  height: 15px;
}
.user-v-font {
  font-size: 15px;
  color: #00c3ff;
}
.user_qianming {
  padding-left: 10px;
  font-size: 16px;
  padding-top: 20px;
  color: #999;
}

.user_num {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
}

.user_num > div {
  text-align: center;
  border-right: 1px dotted #999;
  box-sizing: border-box;
  width: 80px;
  height: 40px;
  line-height: 20px;
}

.user_anniu {
  position: absolute;
  bottom: 10px;
  right: 40px
}

.num_text {
  color: #999;
}

.num_number {
  font-size: 20px;
  color: #333;
}
.el-menu-item>span {
  font-size: 16px;
  color: #999;
}

/*下面部分样式*/
.person_body {
  width: 1000px;
  margin-top: 210px;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
}

.person_body_left {
  width: 27%;
  height: 620px;
  border-radius: 5px;
  margin-right: 3%;
  text-align: center;
}

.person_body_list {
  width: 100%;
  height: 50px;
  margin-top: 25px;
  font-size: 22px;
  border-bottom: 1px solid #f0f0f0;
  background-image: -webkit-linear-gradient(
    left,
    rgb(42, 134, 141),
    #e9e625dc 20%,
    #3498db 40%,
    #e74c3c 60%,
    #09ff009a 80%,
    rgba(82, 196, 204, 0.281) 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
}

.el-menu-item {
  margin-top: 22px;
}

.person_body_right {
  width: 70%;
  /* height: 500px; */
  border-radius: 5px;
  background-color: white;
}

.box-card {
  height: 320px;
}

/*ui样式*/
.el-button {
  width: 84px;
}
</style>
